﻿<% 
var today = new Date();

function translateMonth(month){var rtn="";switch(parseInt(month)){case 1:rtn="一";break;case 2:rtn="二";break;case 3:rtn="三";break;case 4:rtn="四";break;case 5:rtn="五";break;case 6:rtn="六";break;case 7:rtn="七";break;case 8:rtn="八";break;case 9:rtn="九";break;case 10:rtn="十";break;case 11:rtn="十一";break;case 12:rtn="十二";break;default:break;}
return rtn;}
%>
<%include page_header%>
	
	<div class="container" style="margin-top:30px;">
		<div class="row">
	    	<div class="col-sm-12">
	        	<!-- 搜索区 -->
	        	<div class="pull-right">
		            <div class="form-group has-feedback">
			            <label class="control-label">　</label>
			            <input type="text" id="keyword" name="keyword" class="form-control" placeholder="search title">
			            <span id="btnSearch" class="text-muted glyphicon glyphicon-search form-control-feedback pointer"></span>
		            </div>
		        </div>

		        <h1 class="text-muted">
		          Todo <small>简洁的任务管理系统...</small>
		        </h1>	        
	        	<hr />
	      	</div>
	  	</div>
	  	<div class="row">
			<%include page_nav%>

	      	<div class="col-sm-9 tasks-widget ">
	      		<div class="pull-right">
			        <button id="btnCreate" type="button" class="btn btn-primary btn-lg btn-block">
			        	Create new
			        </button>
		        </div>

				<h2 class="text-muted ">
		        <% if (curType == siteType.todo){%>			
		        <span style="cursor:pointer" id="switchDate">
		        	<small style="font-size:12px;"><i class="glyphicon glyphicon-chevron-left"></i></small>
		        	第<%=searchCondition.week.index%>周Todo
		        	<small style="font-size:12px;"><i class="glyphicon glyphicon-chevron-right"></i></small>
		        	<small class="badge badge-primary" style="font-size:13px; padding:10px 20px; font-weight:normal;"><%=searchCondition.week.rang%></small>
		        </span>
				<% }%>&nbsp;
				</h2>
				<hr>

				<ul class="task-list">
					
					<%include task_list%>					

					<li>
						normal
					</li>
					<li class="task-scheduled">
						schduled
					</li>
					<li class="task-expired">
						expired
					</li>
					<li class="task-draft">
						draft
					</li>
					<li class="task-done">
						done
					</li>
				</ul>

			</div>
	    </div>
  	</div>

<%include page_footer%>

<% if (curType == siteType.todo){%>
    <link rel='stylesheet' href='/javascripts/bootstrap-select/bootstrap-select.min.css' />
    <link rel='stylesheet' href="/javascripts/bootstrap-datetimepicker/css/datetimepicker.css" />
    <script type="text/javascript" src="/javascripts/bootstrap-select/bootstrap-select.min.js"></script>
   <script type="text/javascript" src="/javascripts/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>

<% }%>
<% if (curType == siteType.tag){%>
    <link rel='stylesheet' href='/javascripts/bootstrap-select/bootstrap-select.min.css' />
    <script type="text/javascript" src="/javascripts/bootstrap-select/bootstrap-select.min.js"></script>

    <link rel='stylesheet' href='/javascripts/bootstrap-colorpicker/css/colorpicker.css' />
    <script type="text/javascript" src="/javascripts/bootstrap-colorpicker/js/bootstrap-colorpicker.js"></script>
<% }%>

<script type="text/javascript">
	$(function(){
		var bindEvent = function(){
			/*
			$('#switchDate').popover({
			  content: "点击切换时间",
			  trigger: 'hover',
			  placement: "right",
			  template:'<div class="popover" role="tooltip" style="font-size:14px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
			});
			*/
			$("a[name=btnEdit]").unbind("click").click(function(e){
				e.stopPropagation();
				doEdit($(this).attr("data-id"));
			});
			$("#keyword").unbind("keydown").keydown(function(event){
				if(event.keyCode == 13){doReload(false);}   
			})
			$("#btnSearch").unbind("click").click(function(){
				doReload(false);
			});
			$("a[name=btnDel]").unbind("click").click(function(e){
				e.stopPropagation();
				doDel($(this).attr("data-id"));
			});
			$("a[name=btnDone]").unbind("click").click(function(e){
				e.stopPropagation();
				doDone($(this).attr("data-id"));
			});
			$("i[name=btnStar]").unbind("click").click(function(e){
				e.stopPropagation();
				doStar($(this).attr("data-id"), !$(this).hasClass("font-star"), this);
			});
		};

		var doReload = function(isClear){
			var searchCondition = <%-JSON.stringify(searchCondition)%>;
			var url = "/api/get-list/<%=curType%>"
			var keyword = isClear?"":$("#keyword").val().trim();
			searchCondition.keyword = keyword;
			$.post(url, searchCondition, function(data){
				$(".task-list").html(data);
				bindEvent();
			});
		};
		var doDel = function(id){
			var url = "/<%=controllerName%>/remove/" + id;
			
            art.dialog.confirm('Are you sure delete the todo?',
				function () { 
					$.get(url, function(){
						//$("#li_"+ id + ", #task_content_" + id).remove();
						doReload(true);
						//reload if not any todo
					});
				},
				null
			);
		};
		var doDone = function(id){
			var url = "/todo/done-submit/" + id;
			
            art.dialog.confirm('Are you sure you complate the todo?',
				function () { 
					$.post(url, {done: true}, function(){
						doReload(true);
					});
				},
				null
			);
		};
		var doStar = function(id, toStar, elem){
			var url = "/todo/star-submit/" + id;
			$.post(url, {isStar: toStar}, function(){
				//doReload(true);
				$(elem)
					.toggleClass("glyphicon-star")
					.toggleClass("glyphicon-star-empty")
					.toggleClass("font-star");
			});
		};

		var editSubmit = function(){
			var that = this;
			var errMsg = "";
			var postData = {
				id: $("#_id").val().trim(),
				title: $("#title").val().trim(),
				className: "",
				color: "",
				content: "",
				isStar: false,
				categoryId: $("#category").val(),
				todoDate: $("#todoDate").val(),
				tagIds: []
			};
			if(postData.title == ""){
				errMsg = errMsg + (errMsg==""?"":"<br/>") + "标题不能为空.";
				$("#title").parents(".form-group").addClass("has-error");
			}
			postData.className = $("#selClassName").val();	
			postData.color = $("#color").val();	
			postData.content = $("#content").val();
			$("i.tag_cur").each(function(index, item){
				postData.tagIds.push(item.id.split("_")[1]);
			});
			postData.isStar = $("#iStar>i").hasClass("glyphicon-star");
			
			<% if (curType == siteType.todo){%>
			if(postData.todoDate == "" || (new Date(postData.todoDate)<new Date())){
				errMsg = errMsg + (errMsg==""?"":"<br/>") + "完成时间不正确";
				$("#todoDate").parents(".form-group").addClass("has-error");
			}

			<% }%>

			if(errMsg != ""){				
				$("#alt_error").html(errMsg).removeClass("hide");
				return false;
			}
			$.post("/<%=controllerName%>/edit-submit", postData, 
				function(data){
					if(data.status != 1){
						$("#alt_error")
							.html(data.msg)
							.removeClass("hide");						
						return false;	
					}
					doReload(true);
					that.close();
			});
			return false;
			<% if (curType == siteType.todo){%>

			<% }%>

			<% if (curType == siteType.category){%>
			<% }%>

		};
		var tagsSubmit = function(){};
		var doEdit = function(id){
			var url = "/<%=controllerName%>/edit/" + id;

			$.get(url,function(data){
				art.dialog({
			<% if (curType == siteType.todo){%>
	                height: 360,
			<% }%>
			<% if (curType == siteType.category){%>
	                height: 180,
			<% }%>
			<% if (curType == siteType.tag){%>
	                height: 280,
			<% }%>
	                'content': data,
	                init: function(){
						bindEditEvent();
					},
	                ok: editSubmit,
	                cancel: function(){}
	            });
			});
		};
		$("#btnCreate").click(function(){
			doEdit(0);
		});

		bindEvent();	

		var bindEditEvent = function(){
			<% if (curType == siteType.todo){%>
				$('.form_datetime').datetimepicker({
					format:"yyyy-mm-dd hh:ii", 
					autoclose:true,
					startDate: new Date(),
					pickerPosition: "bottom-left"
				});
			    $("#iStar").click(function(){
			    	$("i", this).toggleClass("glyphicon-star-empty")
			    		.toggleClass("glyphicon-star")
			    		.toggleClass("font-star");
			      
			    });
			    $("#iTags").click(function(){
			      art.dialog({
			          height: 240,
			          'content': $("#manageTags")[0],
			          ok: tagsSubmit,
					  isFixBodyScroll: "fixBodyScroll"
			      });
			    });
			    $("#btnAddTag").click(function(){
		    		var tagData = {
		    			title: $("#txtTagName").val().trim(),
		    			className: "default"
		    		}
					if(tagData.title == ""){
						$("#tagError").html("标题不能为空");
					}
					tagData.className = $("#selClassName").val();	
			    	$.post("/tag/edit-submit", tagData, function(data){
						if(data.status != 1){
							$("#tagError")
								.html(data.msg);						
							return false;	
						}

						$("#div_tag_all").append(tagData.title);
						$("#txtTagName").val("");
					});
			    });

			    var moveTag = function(elem, target){
			    	$("#" + target).append($(elem).toggleClass("tag_cur").toggleClass("tag_all"));
			    	if($("i.tag_cur").length>0){
			    		$("#iTags i.glyphicon-tag").addClass("font-tag");
			    	}
			    	else{
			    		$("#iTags i.glyphicon-tag").removeClass("font-tag");
			    	}
			    };
			    $("#manageTags i.fn-tag-move").click(function(){
			    	if($(this).hasClass("tag_cur")){
						moveTag(this, "div_tag_all");			    		
			    	}
			    	else{
			    		moveTag(this, "div_tag_cur");
			    	}
			    });
			<% }%>

			<% if (curType == siteType.todo || curType == siteType.tag){%>	                	
				$('#selClassName')
					.val($("#selClassName").attr("data-val"))
					.selectpicker(); 

			<% if (curType == siteType.tag){%>
				$('.colorpicker-default').colorpicker();
				$(".color-group .color-choose").click(function(){
					var val = $(this).attr("data-val").split("-")
					chooseColor('color', val[0], val[1])
				});
				$("#color").change(function() {
					$(".label_preview").css("background-color",$("#color").val());
					$(".line_color label span").removeClass("choose");
					$('.colorpicker-default').colorpicker("setValue", $("#color").val());
				}); 
				/**
				* 选择创建标签的颜色
				*/
				var chooseColor = function(color_input_id, colorid, color) {
					$(".line_color label span").removeClass("choose")
						.removeClass("glyphicon")
						.removeClass("glyphicon-ok");
					$color = $("#color_" + color_input_id + "_" + colorid);
					if ($color.hasClass("choose")) {
						$color.removeClass("choose")
							.removeClass("glyphicon")
							.removeClass("glyphicon-ok");
						$("#" + color_input_id).val("");
					} else {
						$color.addClass("choose")
							.addClass("glyphicon")
							.addClass("glyphicon-ok");
						$("#" + color_input_id).val(color);
						$(".label_preview").css("background-color", color);
						$('.colorpicker-default').colorpicker("setValue", $("#color").val());
					}
				}; 
				<% }%>
			<% }%>
		}	
	});

</script>
